@extends("layout/admin")
@section("css")
    <link href="/admins/css/plugins/dataTables/datatables.min.css" rel="stylesheet">
    <link href="/admins/css/plugins/slick/slick.css" rel="stylesheet">
    <link href="/admins/css/plugins/slick/slick-theme.css" rel="stylesheet">
    <style>
        .slick_demo_2 .ibox-content {  margin: 0 10px;  }
        .slick_demo_2 .ibox-content img{height: 117px;}
    </style>
@endsection
@section("content")
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-lg-10">
            <h2>轮播图管理</h2>
            <ol class="breadcrumb">
                <li>
                    <a href="/admin">后台管理</a>
                </li>

                <li class="active">
                    <strong>轮播图列表</strong>
                </li>
            </ol>
        </div>
        <div class="col-lg-2">

        </div>
    </div>
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-lg-10 col-lg-offset-1">
                <h4 class="text-center m">
                    {{--Multiple example with responsive breakpoints--}}
                </h4>
                <div class="slick_demo_2">
                    @foreach($carouselInfo as $k=>$v)
                        <div>
                            <div class="ibox-content" data="{{$v['id']}}" >
                                <h2>{{$v['imgname']}}</h2>
                                <p>
                                    <img src="{{$v['imgurl']}}" alt="">
                                </p>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="col-lg-10 col-lg-offset-1 text-center" style="padding: 20px 0;">
                    <div>
                        <button type="button" class="btn btn-danger delete" onclick="deleteCarousel($(this))">删除</button>
                        {{--<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">排序</button>--}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal inmodal fade" id="myModal" tabindex="-1" role="dialog"  aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">轮播图排序</h4>
                    <small class="font-bold">拖动图片到指定位置即可排序</small>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="ibox ">
                                <div class="ibox-title">
                                    <h5>轮播图图片顺序列表</h5>
                                </div>
                                <div class="ibox-content">
                                    <div class="dd" id="nestable">
                                        <ol class="dd-list">
                                            @foreach($carouselInfo as $k => $v)
                                                <li class="dd-item" data-id="{{$v->id}}">
                                                    <div class="dd-handle"><img src="{{$v->imgurl}}" alt=""></div>
                                                </li>
                                            @endforeach
                                        </ol>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary sort">排序</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section("js")
    <script src="/admins/js/plugins/dataTables/datatables.min.js"></script>
    <script src="/admins/js/plugins/jeditable/jquery.jeditable.js"></script>

    <!-- slick carousel-->
    <script src="/admins/js/plugins/slick/slick.min.js"></script>

    <script>
        $(document).ready(function(){
            $('.dataTables-example').DataTable({
                dom: '<"html5buttons"B>lTfgitp',
                buttons: [
                    { extend: 'copy'},
                    {extend: 'csv'},
                    {extend: 'excel', title: 'ExampleFile'},
                    {extend: 'pdf', title: 'ExampleFile'},

                    {extend: 'print',
                        customize: function (win){
                            $(win.document.body).addClass('white-bg');
                            $(win.document.body).css('font-size', '10px');

                            $(win.document.body).find('table')
                                    .addClass('compact')
                                    .css('font-size', 'inherit');
                        }
                    }
                ]

            });
            /* Init DataTables */
            var oTable = $('#editable').DataTable();
            /* Apply the jEditable handlers to the table */
            oTable.$('td').editable( '../example_ajax.php', {
                "callback": function( sValue, y ) {
                    var aPos = oTable.fnGetPosition( this );
                    oTable.fnUpdate( sValue, aPos[0], aPos[1] );
                },
                "submitdata": function ( value, settings ) {
                    return {
                        "row_id": this.parentNode.getAttribute('id'),
                        "column": oTable.fnGetPosition( this )[2]
                    };
                },

                "width": "90%",
                "height": "100%"
            } );
            $('.slick_demo_2').slick({
                infinite: true,
                slidesToShow: 3,
                slidesToScroll: 1,
                centerMode: true,
                responsive: [
                    {
                        breakpoint: 1024,
                        settings: {
                            slidesToShow: 3,
                            slidesToScroll: 3,
                            infinite: true,
                            dots: true
                        }
                    },
                    {
                        breakpoint: 600,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 2
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                    }
                ]
            });

        });

        function fnClickAddRow() {
            $('#editable').dataTable().fnAddData( [
                "Custom row",
                "New row",
                "New row",
                "New row",
                "New row" ] );

        }
        function deleteCate(obj){
            that = obj;
            swal({
                title: "危险操作，确定删除?",
                text: "删除后将无法恢复！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "确定!",
                closeOnConfirm: false
            }, function () {
                var goods_id = that.attr("data");
                $.get("/admin/cate-delete",{"cate_id":cate_id},function(data){
                    if(data == 1){
                        that.parents("tr").remove();
                        swal("删除!", "删除分类成功", "success");
                    }else{
                        swal("删除!", "删除分类出错，请稍后再试", "error");
                    }
                });
            });
        };

        function deleteCarousel(obj){
            that = obj;
            swal({
                title: "确定删除?",
                text: "此操作不可逆转!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "确定!",
                closeOnConfirm: false
            }, function () {
                var carousel_id = $(".slick-current").children(".ibox-content").attr('data');
                $.get("/admin/carousel-delete",{"carousel_id":carousel_id},function(data){
                    if(data == 1){
                        that.parents("tr").remove();
                        swal({
                            title: "删除!",
                            text: "图片已删除",
                            type: "success",
                        }, function () {
                            window.location.reload();
                        });
                    }else{
                        swal("删除!", "删除出错,请稍后再试", "error");
                    }
                });
            });
        };
    </script>
@endsection